<?php get_instance()->view('common/header');?>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Tx7kgtgc31DjU25cP2FU0bFOr01MzI86"></script>
<style>
    .content-btn-box,.content-box{margin-top:10px;}
    .container {
        width: 100%;
    }
    .add-tag-btn{line-height: 40px;}
    .option-item {
        margin-bottom: 5px;
        position: relative;
    }
    .del-tag-btn{font-size: 14px;line-height: 36px;display: block;margin-bottom: 4px;}
    .del-tag-btn a{color: red;}
    .add-img{margin-top: 15px;margin-right: 6px;}
    .radio-list{float: left;}
    .delete-btn{position: absolute;top: 0px;right: 5px;}
    .img-box .img{width: 200px;height: 130px}
    .webuploader-container > div:nth-child(2){width: 78px !important;height: 34px !important;}
    .img-box-pic:after{content: '';display: block;clear: both;}
    .img-del{float: left; position: relative;margin-right: 10px;margin-bottom: 5px;}
    .del-branch-btn{margin-top: 7px;float: left;}
    .add-branch{display: inline-block;margin-top: 34px;}
    #l-map{height:300px;width:100%;}
    .tangram-suggestion-main{z-index: 10050;}
    #uploader-demo .uploader-list img{width: 165px;height: 77px}
    #uploader-demo .thumbnail {width: 165px;height: 77px}
    #filePicker .webuploader-pick img{width: 155px;height: 68px}
</style>
<div class="page-container home">
    <?php get_instance()->view('common/sidebar');?>
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="row">
                <div class="col-md-12">
                    <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                    <h3 class="page-title"> <?php echo $title;?></h3>
                    <ul class="page-breadcrumb breadcrumb">
                        <li class="btn-group"> <a class="btn default ml_5 return" href="<?php echo getUrl('shop/government');?>"><i class="fa fa-chevron-left"></i> 返回</a> </li>
                        <li><i class="fa fa-home"></i><a href="<?php echo getUrl('shop/government');?>">政府办事指南 </a><i class="fa fa-angle-right"></i></li>
                        <li><a href="javascript:void(0);"><?php echo $add ? '添加' : '编辑';?></a></li>
                    </ul>
                    <!-- END PAGE TITLE & BREADCRUMB-->
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <!-- BEGIN VALIDATION STATES-->
                    <div class="portlet box">
                        <div class="portlet-body form">
                            <!-- BEGIN FORM-->
                            <form action="<?php echo getUrl('shop/government/save')?>" class="form-horizontal" method="post" id="main-form" novalidate="novalidate">
                                <div class="form-body">
                                    <div class="form-group">
                                        <label class="control-label col-md-2">logo<span class="required">*</span></label>
                                        <div class="col-md-2">
                                            <div class="cropitMaster-box" style="width:110px;height:110px;&quot;">
                                                <img style="width:100%;height:100%;" id="icn-img" alt="" src="<?php echo ! $add ? $info['logo'] : getDefaultImg(); ?>">
                                            </div>
                                            <a class="upload-btn" href="javascript:void(0);">选择上传图片（150*150）</a>
                                            <input type="hidden" name="logo" id="pic" >
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-2">轮播图<span class="required">*</span></label>
                                        <div class="col-md-10">
                                            <div id="uploader-demo">
                                                <!--用来存放item-->
                                                <div class="uploader-list">
                                                    <?php if ($info['pic']):?>
                                                        <?php  foreach ($info['pic'] as $v):?>
                                                            <div id="" class="file-item thumbnail pic-list">
                                                                <img src="<?php echo $v; ?>">
                                                                <a title="删除" class="delete-btn hide" href="javascript:void(0);" style="color:#b94a48;position:absolute;top:-10px;right:-5px;background-color:#ffff;height:17px;width:15px;font-size:12px;padding:2px;">
                                                                    <i class="fa fa-times"></i>
                                                                </a>
                                                                <input name="pic[]" type="hidden" class="file-name" value="<?php echo $v; ?>">
                                                            </div>
                                                    <?php endforeach; endif;?>
                                                    <div id="filePicker" class="file-item thumbnail webuploader-container">
                                                        <div class="webuploader-pick">
                                                            <div style="position:absolute;top:0;left:0;width:100%;height:100%;padding-top:50px;color:grey;">选择图片(15:7)</div>
                                                            <img title="选择上传图片" src="<?php echo getDefaultImg(); ?>">
                                                        </div>
                                                        <div id="rt_rt_1c2t7atu83351ra0bvm7gcgnu1" style="position: absolute; top: 4px; left: 4px; width: 100px; height: 100px; overflow: hidden; bottom: auto; right: auto;">
                                                            <input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
                                                            <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);">
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <script type="text/javascript">
                                                    $(function(){
                                                        uploadImg({
                                                            box:'#uploader-demo',
                                                            uploadBtn:"#filePicker",
                                                            fileName:'pic[]',
                                                            width:110,  //显示缩略图宽带
                                                            uploadUrl:'<?php echo getUrl('shop/government/uploadImgs');?>',
                                                            height:100	//显示缩略图高度
                                                        });
                                                    });

                                                </script>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-2">政府名称<span class="required">*</span></label>
                                        <div class="col-md-7">
                                            <input class="form-control required" name="name" type="text" value="<?php echo ! $add ? $info['name'] : '';?>">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-2">政府电话<span class="required">*</span></label>
                                        <div class="col-md-7">
                                            <input class="form-control required" name="tel" type="tel" value="<?php echo ! $add ? $info['tel'] : '';?>" maxlength="12">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-2">政府地址<span class="required">*</span></label>
                                        <div class="col-md-7">
                                            <input class="form-control required address" name="address" type="text" value="<?php echo ! $add ? $info['address'] : '';?>" readonly>
                                        </div>
                                        <input class="form-control required" name="latitude" type="hidden" value="<?php echo ! $add ? $info['latitude'] : '';?>">
                                        <input class="form-control required" name="longitude" type="hidden" value="<?php echo ! $add ? $info['longitude'] : '';?>">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-2"><h2>部门信息</h2></label>
                                        <a class="add-branch" href="javascript:void(0);"><i class="fa fa-plus"></i> 添加</a>
                                        <hr/>
                                    </div>
                                    <div class="branch">
                                        <?php if ($add):?>
                                            <div class="form-group">
                                                <label class="control-label col-md-2">部门名称<span class="required">*</span></label>
                                                <div class="col-md-3">
                                                    <input class="form-control required" name="title[]" type="text">
                                                </div>
                                                <label class="control-label col-md-1">部门电话<span class="required">*</span></label>
                                                <div class="col-md-3" >
                                                    <input class="form-control required" name="mobile[]" type="tel" minlength="7">
                                                </div>
                                                <a class="del-branch-btn" href="javascript:void(0);"><i class="fa fa-times"></i></a>
                                            </div>
                                        <?php else: foreach ($info['branch'] as $v):?>
                                            <div class="form-group">
                                                <label class="control-label col-md-2">部门名称<span class="required">*</span></label>
                                                <div class="col-md-3">
                                                    <input class="form-control required" name="title[]" type="text" value="<?php echo $v['title'];?>">
                                                </div>
                                                <label class="control-label col-md-1">部门电话<span class="required">*</span></label>
                                                <div class="col-md-3" >
                                                    <input class="form-control required" name="mobile[]" type="tel" value="<?php echo $v['mobile'];?>" minlength="7">
                                                </div>
                                                <a class="del-branch-btn" href="javascript:void(0);"><i class="fa fa-times"></i></a>
                                            </div>
                                        <?php endforeach; endif;?>
                                    </div>
                                    <script type="text/javascript">
                                        $(function () {
                                           $(".add-branch").click(function () {
                                               var len = $(".branch").find('.form-group').length;
                                               if (len > 0) {
                                                   var input = $(".branch").find('.form-group').eq(len - 1).find('input');
                                                   var title = input.eq(0).val();
                                                   var mobile = input.eq(1).val();
                                                   if (!title.length || !mobile.length) {
                                                       show_message({status: 0, message: '请完成上一个信息的填写'});
                                                       return false;
                                                   }
                                               }
                                               var html = '<div class="form-group">' +
                                                    '<label class="control-label col-md-2">部门名称<span class="required">*</span></label>' +
                                                    '<div class="col-md-3">' +
                                                        '<input class="form-control required" name="title[]" type="text" value=""/>' +
                                                   '</div><label class="control-label col-md-1">部门电话<span class="required">*</span></label>' +
                                                   '<div class="col-md-3" >' +
                                                        '<input class="form-control required" name="mobile[]" type="tel" value="" maxlength="11" minlength="7">' +
                                                    '</div><a class="del-branch-btn" href="javascript:void(0);"><i class="fa fa-times"></i></a></div>';
                                               $(".branch").append(html);
                                           });

                                           $(".del-branch-btn").live('click',function () {
                                                $(this).parents('.form-group').remove();
                                           });
                                        });
                                    </script>
                                    <div class="form-actionsc fluid">
                                        <div class="col-md-offset-2 col-md-9" style="padding-left: 0;">
                                            <input name="id" value="<?php echo ! $add ? $info['id'] : '';?>" type="hidden">
                                            <button class="btn green"><i class="fa fa-save"></i> 保存</button>
                                            <a class="btn default seach-btn" href="<?php echo getUrl('shop/government');?>"><i class="fa fa-chevron-left"></i> 返回</a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- END VALIDATION STATES-->
                </div>
                <!-- END PAGE CONTENT-->
            </div>
        </div>
    </div>
</div>
<div id="save-modal" class="modal fade modal_small" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">地址</h4>
            </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-md-2">地址<span class="required">*</span></label>
                        <div class="col-md-9">
                            <input type="text" id="suggestId" size="20" class="form-control required" placeholder="请输入地址"/>
                        </div>
                        <input type="hidden" id="addr"/>
                        <input type="hidden" id="lat"/>
                        <input type="hidden" id="lng"/>
                    </div>
                </div>
            <div style="position: relative;">
                <img style="position: absolute; left: 50%;top: 50%;z-index: 999;" src="<?php echo $this->staticUrl;?>img/dw.png" alt="">
                <div id="l-map"></div>
            </div>
            <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
            <script type="text/javascript">
                // 百度地图API功能
                function G(id) {
                    return document.getElementById(id);
                }

                var map = new BMap.Map("l-map");
                map.centerAndZoom("重庆",12);                   // 初始化地图,设置城市和地图级别。

                var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                    {"input" : "suggestId"
                        ,"location" : map
                    });
                map.enableScrollWheelZoom(true); // 缩放地图

                // 中心位置移动
                map.addEventListener("dragend", function(){
                    var center = map.getCenter();
                    var geoc = new BMap.Geocoder();
                    geoc.getLocation(center, function(rs){
                        if (rs.surroundingPois.length){
                            var title = rs.surroundingPois[0];
                            $("#addr").val(title.title);
                            $("#suggestId").val(title.title);
                            $("#lat").val(title.point.lat);
                            $("#lng").val(title.point.lng);
                        }else{
                            $("#addr").val(rs.address);
                            $("#suggestId").val(rs.address);
                            $("#lat").val(center.lat);
                            $("#lng").val(center.lng);
                        }
                    });
                });
                
                ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
                    var str = "";
                    var _value = e.fromitem.value;
                    var value = "";
                    if (e.fromitem.index > -1) {
                        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    }

                    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                    value = "";
                    if (e.toitem.index > -1) {
                        _value = e.toitem.value;
                        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    }
                    $("#addr").val(value);
                    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                    G("searchResultPanel").innerHTML = str;
                });

                var myValue;
                ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
                    var _value = e.item.value;
                    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                    G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
                    setPlace();
                });

                function setPlace(){
                    map.clearOverlays();    //清除地图上所有覆盖物
                    function myFun(){
                        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                        $("#lat").val(pp.lat);
                        $("#lng").val(pp.lng);
                        map.centerAndZoom(pp, 18);
//                        map.addOverlay(new BMap.Marker(pp));    //添加标注
                    }
                    var local = new BMap.LocalSearch(map, { //智能搜索
                        onSearchComplete: myFun
                    });
                    local.search(myValue);
                }
            </script>

            <div class="modal-footer">
                <input type="hidden" name="id" value=""/>
                <button class="btn default" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i> 关闭</button>
                <button type="submit" class="btn green field-submit-btn"><i class="fa fa-save"></i> 保存</button>
                <script type="text/javascript">
                    $(function(){
                        var model = $('#save-modal');

                        $('.address').live('click',function(){
                            model.find('.has-error').removeClass('has-error').find('.validate_message').remove();
                            model.find('.show_message_error').remove();
                            model.modal();
                        });

                        $(".field-submit-btn").click(function () {
                            var addr = $("#addr").val();
                            var lat = $("#lat").val();
                            var lng = $("#lng").val();
                            if(!addr.length || !lat.length || !lng.length){
                                show_modal_message({status:0, message:'请输入正确的地址'},model.find('.modal-body'));
                                return false;
                            }
                            $("[name='address']").val(addr);
                            $("[name='latitude']").val(lat);
                            $("[name='longitude']").val(lng);
                            $(this).prev().click();
                        });
                    });
                </script>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        cropitMaster({
            uploadBtn:$('.upload-btn'),
            height:'152px',
            width:'152px',
            complete:function(btn,data){
                $('#icn-img').attr('src', data);
                $('#pic').val(data).change();
            }
        });
        cropitMaster({
            uploadBtn:$('.upload-btn'),
            height:'152px',
            width:'152px',
            complete:function(btn,data){
                $('#icn-img').attr('src', data);
                $('#pic').val(data).change();
            }
        });
        $.e_validate.init('#main-form', {});
    });

    $(function(){
        setTimeout("$('.form-actions').width($('.form-body').innerWidth()).removeClass('hide');", '500');
        window.onresize = function(){
            $('.form-actions').width($('.form-body').innerWidth());
        }
    });
</script>
</body>
</html>